<template>
  <div>
    <div style="text-align: center;line-height: 30px;font-size: 20px;">
      <p>活动总览</p>
    </div>
    <el-table
      :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()) 
      || data.userId.toLowerCase().includes(search.toLowerCase())
      || data.telNumber.toLowerCase().includes(search.toLowerCase())
      || data.activityId.toLowerCase().includes(search.toLowerCase())
      || data.activityName.toLowerCase().includes(search.toLowerCase())
      || data.activityDesc.toLowerCase().includes(search.toLowerCase())
      || data.currentDate.toLowerCase().includes(search.toLowerCase())
      )"
      border
      style="width: 100%"
      :fit=true
      id="example_table">
      <el-table-column
        fixed
        align="right"
        width="90">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button @click="lookmore(scope.row.activityId)" type="text" size="small">查看</el-button>
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData,scope.row.activityId)" type="text" size="small" style="color: red;">删除</el-button>
        </template>
        <!-- @click="deleteinfo(scope.row.activityId)" -->
      </el-table-column>
      <el-table-column
        prop="label"
        label="活动性质"
        width="120"
        align="center"
        :show-overflow-tooltip="true"
        :filters="category"
        :filter-method="filterHandler">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="联系人"
        width="110"
        align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="userId"
        label="发布账号ID"
        width="120"
        align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="telNumber"
        label="手机号"
        width="120"
        align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="activityId"
        label="活动ID"
        width="120"
        align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="activityName"
        label="活动名称"
        width="120"
        align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="activityDesc"
        label="活动简介"
        width="120"
        align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="currentDate"
        label="活动时间"
        width="120"
        align="center"
        :show-overflow-tooltip="true">
      </el-table-column>
    </el-table>
  </div>
  
</template>

<script>
export default {
    name: 'AdminContent',
    data() {
       return {
        search: '',
        tableData: [],
        category: []
      }
    },
    methods: {
      filterHandler(value, row, column) {
        const property = column['property'];
        console.log(JSON.stringify(column));
        return row[property] === value;
      },
      getdata() {
        this.$axios
        .get('/static/mock/allactivity.json')
        .then(res => {
          res = res.data
            if (res.ret && res.data) {
              this.tableData = res.data.tableData
              this.category = res.data.category
            }else {
              alert('网络错误！稍后再试！')
            }
        })
      },
      lookmore(activityId) {
        this.$router.push('/detail/'+activityId)
      },
      deleteRow(index, rows,activityId) {
        this.$confirm('确定要结束吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            this.$axios
                .post('/delete',{
                  activityId: activityId
                })
                .then(res => {
                  if (res.code == 200) {
                    this.$message({
                      type: "success",
                      message: `删除成功`,
                      center:true
                    })
                    rows.splice(index, 1);
                  }
                })
          }).catch(() => {
            
          })
      },
      // deleteinfo(activityId) {
      //   this.$confirm('确定要结束吗?', '提示', {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning'
      //     }).then(() => {
      //       this.$axios
      //           .post('/delete',{
      //             activityId: activityId
      //           })
      //           .then(res => {
      //             if (res.code == 200) {
      //               this.$message({
      //                 type: "success",
      //                 message: `删除成功`,
      //                 center:true
      //               })
      //               rows.splice(index, 1);
      //             }
      //           })
      //     }).catch(() => {
      //     })
      // },
    },
    mounted() {
      this.getdata()
    },
    computed: {
    num: function () {
      return this.tableData.length
    }
  },
}
</script>

<style scoped>
</style>


<!-- @click.native.prevent="deleteRow(scope.$index, tableData)" 
  deleteRow(index, rows) {
        rows.splice(index, 1);
      }
-->